<template>
	<view>
		<view class="head">
			<u-field @input="change" icon="search" v-model="value" placeholder="搜索昵称、id">
				<u-button :disabled=btndis class="btn" size="mini" slot="right" type="primary" @click="onSearch">搜索</u-button>
			</u-field>
		</view>
		<view class="content" v-if="showContent">
			<view class="content-title">
				<image src="../../static/img/icon/icon-player.png" mode=""></image>
				<view class="">
					玩家({{playerList.length}})
				</view>
			</view>
			<view class="item" v-for="(item,index) in playerList" :key="index" @click="player(item.account_id)">
				<view class="item-l">
					<image class="head-img" :src="item.avatarfull" mode=""></image>
					<view class="head-name">{{item.personaname}}</view>
				</view>
				<view class="item-r">
					<text>ID:{{item.account_id}}</text>
					<u-icon name="arrow-right" color="#C3C3C3" size="28"></u-icon>
				</view>
			</view>
		</view>
		<view class="history" v-else>
			<view v-if="showHistory">
				<view class="history-title">
					<image class="title-img" src="../../static/img/icon/icon-history.png" mode=""></image>
					<view class="">搜索记录({{searchList.length}})</view>
				</view>
				<view class="history-item" v-for="(item,index) in searchList" :key="index">
					<view class="item-text" @click="history(item)">{{item}}</view>
					<image class="item-img" @click="historyItemDel(index)" src="../../static/img/icon/icon-del.png" mode=""></image>
				</view>
				<view class="history-del">
					<view class="del-text" @click="historyDel">
						<image src="../../static/img/icon/icon-clear.png" mode=""></image>
						<text class="">清除历史搜索</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		searchUser
	} from '../../api/api.js'
	export default {
		data() {
			return {
				value: '',
				showContent: false,
				showHistory: false,
				playerList: [],
				searchList: [],
				btndis: false
			}
		},
		methods: {
			// 初始化历史搜索缓存
			setSearchList() {
				if (!uni.getStorageSync('searchList')) {
					uni.setStorageSync('searchList', []);
				} else {
					if (uni.getStorageSync('searchList').length > 0) {
						this.showHistory = true
					} else {
						this.showHistory = false
					}
				}
			},
			//设置历史搜索值
			setSearchItem(val) {
				let list = uni.getStorageSync('searchList')
				list.unshift(val)
				let newList = Array.from(new Set(list))
				uni.setStorageSync('searchList', newList);
			},
			//获取历史搜索
			getSearchList() {
				let list = uni.getStorageSync('searchList')
				this.searchList = list
				if (list.length > 0) {
					this.showHistory = true
				} else {
					this.showHistory = false
				}
			},
			change() {
				if (this.value.length == 0) {
					this.showContent = false
					this.playerList = []
				}
			},
			history(val) {
				this.value = val
				this.onSearch()
			},
			onSearch() {
				this.btndis = true
				if (this.value.length > 2) {
					uni.showLoading({
						title: '加载中'
					});
					let data = {
						q: this.value
					}
					searchUser(data).then(res => {
						this.btndis = false
						if (res.statusCode == 200) {
							this.setSearchItem(this.value)
							this.getSearchList()
							uni.hideLoading();
							this.playerList = res.data
							if (this.playerList.length > 0) {
								this.showContent = true
							}
						}
					})
				} else {
					uni.showToast({
						title: '输入3个或3个已上字符',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			historyDel() {
				uni.setStorageSync('searchList', [])
				this.showHistory = false
			},
			historyItemDel(i) {
				let list = uni.getStorageSync('searchList')
				list.splice(i, 1);
				uni.setStorageSync('searchList', list)
				this.getSearchList()
			},
			player(id) {
				uni.navigateTo({
					url: '../player/player?id=' + id,
				});
			}
		},
		onLoad() {
			this.setSearchList()
			this.getSearchList()
		}
	}
</script>

<style lang="less">
	page {
		background-color: #E2E7EB;
	}

	.head {
		background-color: #fff;

		.u-btn--primary {
			background-color: #151A1E;
		}
	}

	.content {
		.content-title {
			height: 40px;
			display: flex;
			align-items: center;
			margin-left: 12px;

			image {
				width: 20px;
				height: 20px;
				margin-right: 12px;
			}
		}

		.item {
			height: 40px;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 1px;

			.item-l {
				display: flex;
				padding-left: 12px;
				align-items: center;

				.head-name {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					width: 160px;
				}

				.head-img {
					width: 36px;
					height: 36px;
					border-radius: 50%;
					margin-right: 10px;
				}
			}

			.item-r {
				padding-right: 12px;
				color: #8B8B8B;
			}
		}
	}

	.history {
		.history-title {
			height: 28px;
			display: flex;
			align-items: center;

			.title-img {
				width: 18px;
				height: 18px;
				margin-left: 10px;
				margin-right: 10px;
			}
		}

		.history-item {
			height: 36px;
			background-color: #fff;
			margin-bottom: 1px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-indent: 10px;

			.item-text {
				height: 36px;
				width: 200px;
				line-height: 36px;
			}

			.item-img {
				width: 18px;
				height: 18px;
				margin-right: 20px;
			}
		}

		.history-del {
			height: 40px;
			width: 100%;
			background-color: #F5F9FC;
			color: #ccc;
			text-align: center;
			line-height: 40px;

			.del-text {
				image {
					width: 16px;
					height: 16px;
					margin-right: 5px;
				}
			}

		}
	}
</style>
